<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateNews">
		<Header :selected="4"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="1">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="6" style="overflow: auto;">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" class="newArea" v-for="(news, index) in newsList"
						:key="index">
						<div class="news-list">
							<el-row :gutter="6" class="news-item" :class="{ 'hover': hoverIndex === index }"
								@mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1">
								<el-col :span="5" class="newsImg">
									<div>
										<el-image style="height:22vh;width:100%"
											:src="$request.getImgUrl() + news.fileUrl"></el-image>
									</div>

								</el-col>
								<el-col :span="19" class="newcontent">
									<div class="newcontentcontainer">
										<div class="title">{{ news.title }}</div>
										<div class="description">{{ news.content }}</div>
										<div class="moreInfoBtn" @click="goToDetail(index)">{{$t("moreDetails")}}</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="24" type="flex" class="paginationArea">
					<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
						layout=" prev, pager, next,jumper" :total="total" :prev-text="$t('previousPage')"
						:next-text="$t('nextPage')" @current-change="handleCurrentChange" />
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		corporateNews
	} from '../../utils/menu.js'
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 4,
				total: 1000,
				currentPage: 1,
				menus: corporateNews,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//企业新闻
						label: this.$t('corporateNews'),
						to: '/corporateNews'
					},
					{
						//企业动态
						label: this.$t('enterpriseDynamics'),
						to: '/enterpriseDynamics'
					}
				],
				newsCarousel: [

					// 添加更多新闻...
				],
				hoverIndex: -1
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.bindList();
			this.bindBg()
		},
		methods: {
			/**
			 * 获取企业新闻顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.qydtBgImage(params).then(res => {
					this.bgImg = this.$request.getImgUrl() + res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * 获取企业新闻列表
			 */
			bindList() {
				let params = {};
				let that = this;
				that.$request.enterpriseTrendsList(params).then(res => {
					this.newsList = res.data
					this.total = res.data.total;
					this.currentPage = res.data.pageNum
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			///////获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				// console.log(currentPage, 'currentPage');
				this.currentPage = currentPage;
				this.bindList();
			},
			//////跳转详情页面
			goToDetail(num) {
				this.$router.push({
					name: this.$t("partyBuildingInNewsDetail"),
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateNews/corporateNews.css");

	.corporateNews .newArea {
		height: auto;
	}

	.corporateNews .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.corporateNews .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #EB7F20;
		border-radius: 4px;
		text-align: center;
		color: #EB7F20;
		margin-top: 2vh;
		margin-left: 10px;
	}

	.corporateNews .moreInfoBtn:hover {
		background-color: #EB7F20;
		color: #FFF;
	}

	.corporateNews .news-list .news-item {
		height: 22vh;
		margin-bottom: 1vh;
	}

	.corporateNews .news-list .day {
		text-align: center;
		font-size: 2em;
		padding-top: 3vh;
		height: 13vh;
	}

	.corporateNews .news-list .month-year {
		text-align: center;
		font-size: 1.2em;
	}

	.corporateNews .btn-next span {
		min-width: 50px !important;
	}

	.el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px !important;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.corporateNews .news-item:hover {
		transform: scale(0.98)
	}
</style>
